<template>
  <div class="app-main-content-box public-material-edit">
    <app-main-title :title="type==='edit'?'编辑图文素材':'新增图文素材'"></app-main-title>
    <el-form
      :model="material"
      :rules="rules"
      ref="material"
      label-width="150px"
      class="demo-ruleForm"
      size="small"
    >
      <el-form-item label="图文消息标题" prop="title">
        <el-input v-model="material.title" clearable></el-input>
      </el-form-item>

      <el-form-item label="图文消息描述" prop="description">
        <el-input
          type="textarea"
          :autosize="{ minRows: 3, maxRows: 15}"
          maxlength="300"
          v-model="material.description"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="图文图片封面链接" prop="picUrl">
        <el-input v-model="material.picUrl" clearable></el-input>
      </el-form-item>
      <el-form-item label="图文消息跳转链接" prop="url">
        <el-input v-model="material.url" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          round
          type="primary"
          @click="submitForm('material')"
        >{{type==='edit'?"提 交":"创 建"}}</el-button>
        <el-button round @click="routerBack">取 消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import { addMaterial } from "@/api/wechat.js";
  import { validateImgUrl } from "@/utils/validate.js";
  export default {
    props: {
      type: {
        require: true,
        type: String
      }
    },
    data() {
      /**
       * 表单校验方法相关
       */
      //图片链接规则
      var validateUrl = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入图文链接"));
        } else if (!validateImgUrl(value)) {
          callback(new Error("输入不符规则,请输入图文消息跳转链接"));
        } else {
          callback();
        }
      };
      return {
        /**
         * 表单校验字段相关
         */
        rules: {
          title: [
            { required: true, message: "请输入图文消息标题", trigger: "blur" },
            {
              min: 1,
              max: 64,
              message: "标题不能为空且长度不能超过64字符",
              trigger: "blur"
            }
          ],
          picUrl: [{ required: true, validator: validateUrl, trigger: "blur" }],
          description: [
            { required: true, message: "请输入图文消息描述", trigger: "blur" },
            {
              min: 1,
              max: 100,
              message: "标题不能为空且长度不能超过100字符",
              trigger: "blur"
            }
          ],
          url: [{ required: true, validator: validateUrl, trigger: "blur" }]
        },
        // 数据
        materialId: "",
        material: {
          title: "",
          picUrl: "",
          description: "",
          url: ""
        }
      };
    },
    mounted() {
      // 获取更改data
      if (this.$route.params.material) {
        this.material = this.$route.params.material;
      }
    },
    methods: {
      /**
       * 按钮组
       */
      // 提交
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            addMaterial(this.material).then(res => {
              this.$notify({
                title: "成功",
                message: `${this.type === "edit" ? "修改成功" : "新增成功"}`,
                type: "success",
                duration: 2000,
                offset: 40
              });
              this.$router.push({
                name: "PublicMaterial"
              });
            });
          } else {
            return false;
          }
        });
      },

      // 取消
      routerBack() {
        this.$router.push({
          name: "PublicMaterial"
        });
      }
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .public-material-edit {
    .el-textarea,
    .el-input {
      width: 600px;
    }
    .textarea-tips {
      width: 600px;
    }
  }
</style>